<template>
  <div class="textArea">
    <!-- 预览控制区 -->
    <div class="previewStyle" :style="{background: formData.bgColor, paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px'}">
      <div class="textContent" :class="{font_w: fontBold,font_ital: fontStyle,font_d: fontDecoration}" :style="{fontSize: formData.fontSize/2 + 'px', color: formData.textColor, textAlign: formData.align}">{{ formData.text }}</div>
    </div>
    <!-- 编辑工作区 -->
    <div v-if="isShowEdit" class="design-editor-item design-hide-class">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap">
          <div class="design-editor-component-title">文本</div>
          <el-tabs v-model="tabActive" tab-position="top">
            <el-tab-pane label="内容设置" name="0">
              <el-form label-position="top" size="mini" :model="formData" label-width="80px">
                <el-form-item label="文本内容">
                  <el-input v-model="formData.text" type="textarea" :rows="12" maxlength="300" show-word-limit placeholder="请输入内容" />
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="样式设置" name="1">
              <div class="styleWrap">
                <div class="titleStyle">内容样式</div>
                <div>
                  <div class="dis al_item dis_ju_spb w100e item_mar">
                    <div class="dis al_item">
                      <span>字号大小</span>
                      <span class="text_mar">{{ formData.fontSize }}像素</span>
                    </div>
                    <el-radio-group v-model="formData.fontSize" size="small">
                      <el-radio-button label="24">小</el-radio-button>
                      <el-radio-button label="28">中</el-radio-button>
                      <el-radio-button label="32">大</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="dis al_item dis_ju_spb w100e item_mar">
                    <div class="dis al_item">
                      <span>对齐方式</span>
                    </div>
                    <el-radio-group v-model="formData.align" size="small">
                      <el-radio-button label="left">居左</el-radio-button>
                      <el-radio-button label="center">居中</el-radio-button>
                      <el-radio-button label="right">居右</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div class="dis al_item">
                      <span>字体颜色</span>
                      <span class="text_mar">{{ formData.textColor }}</span>
                    </div>
                    <div class="dis al_item">
                      <div class="resetText" @click="resetBoderColor(1)">重置</div>
                      <el-color-picker
                        v-model="formData.textColor"
                        :show-alpha="false"
                        color-format="hex"
                        size="mini"
                      />
                    </div>
                  </div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div class="dis al_item">
                      <span>背景颜色</span>
                      <span class="text_mar">{{ formData.bgColor }}</span>
                    </div>
                    <div class="dis al_item">
                      <div class="resetText" @click="resetBoderColor(2)">重置</div>
                      <el-color-picker
                        v-model="formData.bgColor"
                        :show-alpha="false"
                        color-format="hex"
                        size="mini"
                      />
                    </div>
                  </div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div>特殊样式</div>
                    <div class="specialStyle">
                      <el-checkbox-group v-model="formData.fontType" size="mini">
                        <el-checkbox label="1" border>粗体</el-checkbox>
                        <el-checkbox label="2" border>斜体</el-checkbox>
                        <el-checkbox label="3" border>下划线</el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </div>
                </div>
              </div>
              <div class="styleWrap">
                <div class="titleStyle">
                  组件样式
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>上边距</span>
                    <span class="text_mar">{{ formData.marginTop }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginTop" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>下边距</span>
                    <span class="text_mar">{{ formData.marginBottom }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginBottom" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import index from './index.js'

export default index
</script>
